<!--垃圾桶组件-->
<template>
  <div
    class="icon-group"
    :class="[{'on':garbageOpen},{'extendClick':expandClick}]"
    @click="handleIconClick"
  >
    <i class="iconfont iconlajitonggai"></i>
    <i class="iconfont iconlajitongshen"></i>
  </div>
</template>

<script>
export default {
  props: {
    // 图标是否扩展点击：
    expandClick: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 垃圾桶开启：
      garbageOpen: false
    };
  },
  methods: {
    handleIconClick() {
      this.garbageOpen = true;
      this.$emit("iconClicked");
    },
    close() {
      this.garbageOpen = false;
    }
  }
};
</script>

<style lang="less" scoped>
.icon-group {
  &.extendClick {
    .extend-click();
  }

  color: @mc;
  display: inline-flex;
  flex-flow: column nowrap;
  .iconlajitonggai {
    transform-origin: left bottom;
    .tf5(ease);
  }
  .iconlajitongshen {
    position: relative;
    bottom: 8px;
  }
  &.on {
    .iconlajitonggai {
      transform: rotate(-20deg) translateX(2px);
    }
  }
}
</style>